<template>
    <!--  证书详情  -->
    <div class="app-container">
        <!-- 单排详情信息 -->
        <el-form ref="form" :model="certInfoForm" label-width="80px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="工号" prop="staffNo">
                        <el-input v-model="certInfoForm.staffNo" size="small" :disabled="true"  />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="姓名" prop="username">
                        <el-input v-model="certInfoForm.username" size="small" :disabled="true"  />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="部门" prop="deptName">
                        <el-input v-model="certInfoForm.deptName" size="small" :disabled="true"  />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="项目代码" prop="projectCode">
                        <el-input v-model="certInfoForm.projectCode" size="small" :disabled="true"  />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="项目名称" prop="projectName">
                        <el-input v-model="certInfoForm.projectName" size="small" :disabled="true"  />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="证书编号" prop="certNumber">
                        <el-input v-model="certInfoForm.certNumber" size="small" :disabled="true"  />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="发证日期" prop="obtainEvidenceDate">
                        <el-date-picker type="date"  size="small" v-model="certInfoForm.obtainEvidenceDate" :clearable="false" :disabled="true"
                                        value-format="yyyy-MM-dd" style="width: 100%;"  />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="到期日期" prop="endDate">
                        <el-date-picker type="date"  size="small" v-model="certInfoForm.endDate" :clearable="false" :disabled="true"
                                        value-format="yyyy-MM-dd" style="width: 100%;"  />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="有效期(年)" prop="endDate">
                        <el-input-number v-model="certInfoForm.reviewPeriod" size="small" controls-position="right"  :min="0" :max="8"
                                         :disabled="true" style="width: 100%;"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="颁证机构" prop="institutionName">
                        <el-input v-model="certInfoForm.institutionName" size="small" :disabled="true"  />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="证书类型" prop="getCertStatus">
                        <el-select v-model="certInfoForm.getCertStatus"   size="small" :disabled="true" style="width: 100%;" >
                            <el-option
                                    v-for="dict in getCertStatusOptions"
                                    :key="dict.code"
                                    :label="dict.name"
                                    :value="dict.code"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="证书状态" prop="certStatus">
                        <el-select v-model="certInfoForm.certStatus"  size="small" :disabled="true" style="width: 100%;" >
                            <el-option
                                    v-for="dict in certStatusOptions"
                                    :key="dict.code"
                                    :label="dict.name"
                                    :value="dict.code"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="矩阵评估" prop="assessType">
                        <el-select v-model="certInfoForm.assessType"  size="small" :disabled="true" style="width: 100%;" >
                            <el-option
                                    v-for="dict in assessTypes"
                                    :key="dict.code"
                                    :label="dict.name"
                                    :value="dict.code"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="dialog-footer" style="float:right">
            <el-button @click="cancel" size="small">关 闭</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "certDetailForm",
        props: {
            // 证书详情
            certInfoForm: Object,
            // 证书类型字典
            getCertStatusOptions: Array,
            // 证书状态字典
            certStatusOptions: Array,
            // 矩阵评估字典
            assessTypes: Array,
        },
        data() {
            return {}
        },
        created() {
            // console.log("证书详情信息：",this.certInfoForm);
        },
        methods: {
            // 取消按钮
            cancel() {
                // 清空
                this.$emit("cancelDialog");
            },
        }
    }
</script>

<style scoped>

</style>
